<template>
  <div class="container" v-loading="baseInfoDataLoading">
    <div class="left-box">
      <div class="account-safe next-card">
        <div class="block-title">
          <span>账号安全</span>
          <el-button type="primary" link @click="handleMore">更多设置</el-button>
        </div>
        <div class="block-content">
          <div class="block-left">
            <el-progress type="dashboard" :percentage="baseInfoData.safePercent" :color="colors" :stroke-width="10">
              <template #default>
                <div class="progress-text">
                  <span class="label">安全性</span>
                  <span class="value">{{ progressText }}</span>
                </div>
              </template>
            </el-progress>
          </div>
          <div class="block-right">
            <div class="row">
              <div class="label">登录密码</div>
              <div class="value" v-if="baseInfoData.password?.updateTime">
                <span>最近修改时间 {{baseInfoData.password?.updateTime}}</span><i class="iconfont" @click="handleSetChangePsd">&#xe66e;</i>
              </div>
              <div class="content" v-else><el-button type="primary" link>未设置</el-button></div>
            </div>
            <div class="row">
              <div class="label">安全手机号</div>
              <div class="value" v-if="baseInfoData.phone?.data">
                <span>{{baseInfoData.phone?.data}}</span><i class="iconfont" @click="handleSetChangePhone">&#xe66e;</i>
              </div>
              <div class="content" v-else><el-button type="primary" link>未设置</el-button></div>
            </div>
            <div class="row">
              <div class="label">安全邮箱</div>
              <div class="value" v-if="baseInfoData.email?.data">
                <span>{{baseInfoData.email?.data}}</span><i class="iconfont" @click="handleSetChangePhone">&#xe66e;</i>
              </div>
              <div class="content" v-else><el-button type="primary" link>未设置</el-button></div>
            </div>
          </div>
        </div>
      </div>
     
      <div class="common-qs next-card">
        <div class="left">
          <div class="title">常见问题</div>
          <div class="content">
            <div class="qs-anwser" v-for="(item, index) in qsAndAnswer" :key="index">
              <div class="qs">
                Q：
                <span>{{item.q}}</span>
              </div>
              <div class="answer">
                A：
                <span>{{item.a}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="right">
          <div class="q-item title">其他常见问题：</div>
          <div class="q-item">如何设置和修改绑定手机？</div>
          <div class="q-item">收不到验证码怎么办？</div>
          <div class="q-item">后台账号如何变更实名认证信息？</div>
        </div>
      </div>
    </div>
    <div class="right-box">
      <div class="user-info next-card">
        <div class="basic-info-main">
          <div class="basic-info-main-header">
            <div class="avatar">
              <img src="http://foxhcs-alpha-localoss.foxtest.net/20230415/114721741.jpg" alt="">
            </div>
            <div class="name">{{baseInfoData.name}}</div>
            <i class="iconfont">&#xe66e;</i>
          </div>
          <div class="basic-info-sub">
            账号ID：
            <span class="id">{{baseInfoData.userId}}</span>
            <i class="iconfont copy" @click="handleCopy">&#xe636;</i>
            <el-tag type="success" v-if="baseInfoData.personalCertification">个人认证</el-tag>
            <el-tag class="go-auth" type="info" @click="handleEditInfo">编辑资料</el-tag>
          </div>
          <el-divider />
          <div class="basic-info-details">
            <div class="row">
              <div class="label">注册时间</div>
              <div class="value">{{baseInfoData.enrollTime}}</div>
            </div>
            <div class="row">
              <div class="label">最近登录时间</div>
              <div class="value">{{baseInfoData.lastLoginTime}}</div>
            </div>
          </div>
          <el-button type="primary" @click="handleSetChangePsd">修改密码</el-button>
        </div>
      </div>
      <div class="login-type next-card">
        <div class="block-title">登录方式管理</div>
        <div class="block-content">
          <div class="row">
            <div class="label">账密登录</div>
            <div class="value">已设置</div>
          </div>
          <div class="row">
            <div class="label">验证码登录</div>
            <div class="value">
              <span v-if="baseInfoData.verificationCodeLogin">已开启（{{baseInfoData.phone?.data}}）</span>
              <span v-else>未设置</span>
              <el-switch
                v-model="baseInfoData.verificationCodeLogin"
                size="small"
                style="--el-switch-on-color: #13ce66;"
                @change="handleSetCaptchaLogin"
              />
            </div>
          </div>
          <div class="row">
            <div class="label">三方登录</div>
            <div class="value">
              <span>
                <i class="iconfont">&#xe6b3;</i>
              </span>
              <el-button type="primary" link>设置</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 修改密码 -->
    <ChangePsd v-model:showDrawer="showChangePsd"/>
    <!-- 修改手机号 -->
    <ChangePhone v-model:showDrawer="showChangePhone"/>
    <!-- 修改用户信息 -->
    <UserInfo v-model:showDrawer="showUserInfo"/>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import ChangePsd from "@/views/personal/accountSecurity/components/ChangePsd.vue"
import ChangePhone from "@/views/personal/accountSecurity/components/ChangePhone.vue"
import UserInfo from "@/views/personal/info/components/UserInfo.vue"
import { ElMessage } from "element-plus"
import { useRouter } from 'vue-router'
import { getBaseInfo } from "@/api/personal/info/baseInfo"

const router = useRouter()
const handleMore = () => {
  router.push({path: '/personal/accountSecurity/accountSafe'})
}

// 复制账号ID
const handleCopy = () => {
  // 创建一个临时的input元素
  const input = document.createElement('input');
  // 设置input的内容为需要复制的账号ID
  input.value = baseInfoData.value.phone.data;
  // 将input元素添加到文档中
  document.body.appendChild(input);
  // 选中input中的内容
  input.select();
  input.setSelectionRange(0, 99999); // 适用于移动设备

  // 将内容复制到剪贴板
  if (document.execCommand('copy')) {
    // 复制成功后的操作
    ElMessage({
      showClose: true,
      message: '复制成功',
      type: 'success',
    })
  } 

  // 移除临时的input元素
  document.body.removeChild(input);
};
// 修改密码
const showChangePsd = ref(false)
const handleSetChangePsd = () => {
  showChangePsd.value = true
}
// 修改手机号
const showChangePhone = ref(false)
const handleSetChangePhone = () => {
  showChangePhone.value = true
}
// 是否开启验证码登录
const handleSetCaptchaLogin = () => {
  ElMessage({
    showClose: true,
    message: '操作成功',
    type: 'success',
  })
}

// 前往认证
const showUserInfo = ref(false)
const handleEditInfo = () => {
  // router.push({path: '/personal/accountSecurity/realNameAuth'})
  showUserInfo.value = true
}

const qsAndAnswer = ref([
  {q:'文件加密密码用来干什么的？',a:'文件加密通常指的是对敏感数据(如会话录像、日志文件等)进行加密存储，以确保这些数据的安全性。'},
])
const colors = [
  { color: '#f00', text: '低', percentage: 20 },
  { color: '#e6a23c', text: '较低', percentage: 40 },
  { color: '#5cb87a', text: '中', percentage: 60 },
  { color: '#1989fa', text: '较高', percentage: 80 },
  { color: '#6f7ad3', text: '高', percentage: 100 },
]
const progressText = ref()
// 获取账号信息
const baseInfoData = ref({})
const baseInfoDataLoading = ref(false)
const getBaseInfoData = async () => {
  baseInfoDataLoading.value = true
  const res = await getBaseInfo().finally(()=>{
    setTimeout(() => {
      baseInfoDataLoading.value = false
      if(process.env.NODE_ENV === 'development') {
        baseInfoData.value = {
          name: 'RUIFOX', // 昵称
          avatar: 'http://foxhcs-alpha-localoss.foxtest.net/20230415/114721741.jpg', // 头像
          userId: 18981818900, // 账号ID
          enrollTime:'2022-03-06 10:59:40', // 注册时间
          lastLoginTime:'2024-09-25 16:26:35', // 最近登录时间
          safePercent: 10, //安全评分 0-100
          personalCertification: true, // 是否完成个人认证 
          verificationCodeLogin: true, // 是否开启验证码登录
          threePartyLogin: { // 三方登录
            wechat: true,
            qq: false,
            weibo: false,
          },
          password:{ // 密码
            data: null,
            updateTime: '2024-09-25 16:26:35'
          },
          phone:{ // 手机号
            data: '18981818900',
            updateTime: '2024-09-25 16:26:35'
          },
          email:{ // 邮箱
            data: null,
            updateTime: null
          },
        }
      }
      progressText.value = colors.find(item => item.percentage >= baseInfoData.value.safePercent).text || '-'
    }, 500);
  })
  baseInfoData.value = res.data
} 
getBaseInfoData()
</script>
<style scoped lang='scss'>
.container{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #333;
  i{
    font-size: 12px;
    cursor: pointer;
  }
  .left-box{
    flex: 1;
    .account-safe{
      width: auto;
      max-width: unset;
      min-width: 590px;
      background-color: rgb(255, 255, 255);
      border-radius: 4px;
      margin-bottom: 16px;
      .block-title{
        width: 100%;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        cursor: pointer;
        transition: background-color 0.5s;
        font-family: PingFangSC;
        display: flex;
        justify-content: space-between;
        line-height: 54px;
        height: 54px;
        padding: 0px 16px;
        font-weight: 500;
        font-size: 14px;
        color: rgb(51, 51, 51);
      }
      .block-content{
        display: flex;
        align-items: center;
        padding: 16px;
        box-sizing: border-box;
        .block-left{
          margin-right: 72px;
          ::v-deep(.el-progress-circle){
            width: 97px !important;
            height: 97px !important;
          }
          .progress-text{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            .label{
              font-size: 10px;
              color: $mainColor;
              margin-bottom: 8px;
            }
            .value{
              font-size: 18px;
            }
          }
        }
        .block-right{
          flex: 1 1 0%;
          .row{
            margin-top: 8px;
            line-height: 20px;
            display: flex;
            align-items: center;
            .label{
              flex: 0 0 33.33333%;
              width: 33.33333%;
              max-width: 33.33333%;
            }
            .value{
              flex: 0 0 66.66667%;
              width: 66.66667%;
              max-width: 66.66667%;
              i{
                margin-left: 5px;
                color: $mainColor;
              }
            }
          }
        }
      }
    }
    .common-qs{
      display: flex;
      align-items: center;
      padding: 16px;
      color: #333;
      .left{
        width: 60%;
        border-right: 1px #eee solid;
        margin-right: 20px;
        .title{
          font-size: 14px;
          height: 38px;
          line-height: 38px;
        }
        .content{
          .qs-anwser{
            .qs{
              margin-bottom: 8px;
              font-weight: 600;
              line-height: 22px;
            }
            .answer{
              margin-bottom: 8px;
              line-height: 22px;
            }
          }
        }
      }
      .right{
        width: 40%;
        .q-item{
          margin-bottom: 8px;
        }
      }
    }
  }
  .right-box{
    margin-right: 16px;
    .user-info{
      width: 400px;
      padding: 16px;
      box-sizing: border-box;
      margin-bottom: 16px;
      .basic-info-main{
        .basic-info-main-header{
          display: flex;
          justify-content: flex-start;
          align-items: center;
          margin-bottom: 16px;
          .avatar{
            width: 36px;
            height: 36px;
            border-radius: 50%;
            overflow: hidden;
            img{
              width: auto;
              height: 100%;
            }
          }
          .name{
            min-width: 70px;
            font-weight: 500;
            font-size: 18px;
            color: rgb(51, 51, 51);
            line-height: 24px;
            margin: 0 16px;
          }
        }
        .basic-info-sub{
          margin-bottom: 16px;
          color: rgb(105, 105, 105);
          line-height: 20px;
          .copy{
            color: #000;
          }
          .id{
            margin-right: 5px;
          }
          .el-tag{
            margin-left: 8px;
          }
          .go-auth{
            cursor: pointer;
          }
        }
        .basic-info-details{
          margin-top: 16px;
          margin-bottom: 10px;
          .row{
              display: flex;
              align-items: center;
              margin-bottom: 8px;
            .label{
              flex: 1;
              color: rgb(51, 51, 51);
            }
            .value{
              flex: 1;
              text-align: right;
              color: rgb(105, 105, 105);
            }
          }
        }
      }
    }

    .login-type{
      width: auto;
      max-width: 1072px;
      min-width: 368px;
      margin-bottom: 16px;
      .block-title{
        cursor: pointer;
        transition: background-color 0.5s;
        display: flex;
        justify-content: space-between;
        line-height: 54px;
        height: 54px;
        padding: 0px 16px;
        font-weight: 500;
        font-size: 14px;
        color: rgb(51, 51, 51);
      }
      .block-content{
        padding: 0px 16px 16px;
        .row{
          display: flex;
          justify-content: flex-start;
          align-items: center;
          line-height: 20px;
          margin-bottom: 8px;
          .label{
            flex: 0 0 33%;
            width: 33%;
            max-width: 33%;
            margin-right: 24px;
          }
          .value{
            flex: 0 0 67%;
            width: 67%;
            max-width: 67%;
            display: flex;
            align-items: center;
            i{
              margin-left: 5px;
              color: $mainColor;
              font-size: 20px;
              margin-right: 5px;
            }
          }
        }
      }
    }
  }
}
</style>